<template>
  <div>
    <el-row :span="24" style="margin-top: 50px">
      <el-col :span="6" style="margin-left: 50px">
        <p>
          <b>姓名:</b> <span>{{ userName }}</span>
        </p>
        <p>
          <b>学号:</b> <span>{{ userNumber }}</span>
        </p>
      </el-col>
      <el-col :span="12">
        <el-steps :space="200" :active="stepAction" finish-status="success">
          <el-step title="提交"></el-step>
          <el-step title="审核"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row  >
      <el-form ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px" :disabled="isGrade">
        <el-col :span="18">
          <el-row >
            <el-col :span="12">
              <el-form-item label="思想政治" prop="gradePolitics">
                <el-input v-model="form.gradePolitics" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人品德" prop="gradeMorality">
                <el-input v-model="form.gradeMorality" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学习态度" prop="gradeAttitude">
                <el-input v-model="form.gradeAttitude" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织纪律" prop="gradeOrganization">
                <el-input v-model="form.gradeOrganization" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身体素质" prop="gradePhysical">
                <el-input v-model="form.gradePhysical " placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="18">
          <el-row >
            <el-col :span="12">
              <el-form-item label="社会实践" prop="gradePractice">
                <el-input v-model="form.gradePractice" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科学研究" prop="gradeScience">
                <el-input v-model="form.gradeScience" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="院系加分" prop="gradeDepartment">
                <el-input v-model="form.gradeDepartment" placeholder="请输入分数" :maxlength="11"
                  show-word-limit clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文体活动" prop="gradeActivities">
                <el-input v-model="form.gradeActivities" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业扩展" prop="gradeProfession">
                <el-input v-model="form.gradeProfession" placeholder="请输入分数" :maxlength="11"
                  show-word-limit clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职业技能" prop="gradeSkill">
                <el-input v-model="form.gradeSkill" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row >
            <el-col :span="9">
              <el-form-item label="其他" prop="gradeOther">
                <el-input v-model="form.gradeOther" placeholder="请输入分数" :maxlength="11" show-word-limit
                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="上传材料" required>
                <el-upload ref="uploading" :action="uploadingAction" accept=".doc,.docx">
<!--                  :before-upload="uploadingBeforeUpload" -->

                  <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" >
          <el-form-item size="large" >
            <el-button type="primary" @click="submitForm"
                       >提交</el-button>
<!--            v-hasPermi="['zc:comprehensive:**']"-->
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>

  // import {getIsGrade} from "@/api/zc/student";
  import { listGrade, getGrade, delGrade, addGrade, updateGrade,test } from "@/api/zc/grade";
  import { addUserGrade ,getIsGrade} from "@/api/zc/userGrade";

export default {
  components: {},
  props: [],
  data() {
    return {
      form: {
        gradePolitics: '2',
        gradeMorality: '2',
        gradeAttitude: '2',
        gradeOrganization: '2',
        gradePhysical: '2',
        gradePractice: '2',
        gradeScience: '2',
        gradeDepartment: '2',
        gradeActivities: '2',
        gradeProfession: '2',
        gradeSkill: '2',
        gradeOther: '2',
      },
      // 表单校验
      rules: {
        gradePolitics: [
          { required: true, message: "思想政治不能为空", trigger: "blur" }
        ],
        gradeMorality: [
          { required: true, message: "个人品德不能为空", trigger: "blur" }
        ],
        gradeAttitude: [
          { required: true, message: "学习态度不能为空", trigger: "blur" }
        ],
        gradeOrganization: [
          { required: true, message: "组织纪律不能为空", trigger: "blur" }
        ],
        gradePhysical: [
          { required: true, message: "身体素质不能为空", trigger: "blur" }
        ],
        gradePractice: [
          { required: true, message: "社会实践不能为空", trigger: "blur" }
        ],
        gradeScience: [
          { required: true, message: "科学研究不能为空", trigger: "blur" }
        ],
        gradeDepartment: [
          { required: true, message: "院系加分不能为空", trigger: "blur" }
        ],
        gradeActivities: [
          { required: true, message: "文体活动不能为空", trigger: "blur" }
        ],
        gradeProfession: [
          { required: true, message: "专业扩展不能为空", trigger: "blur" }
        ],
        gradeSkill: [
          { required: true, message: "职业技能不能为空", trigger: "blur" }
        ],
        gradeOther: [
          { required: true, message: "其他加分不能为空", trigger: "blur" }
        ],
        // status: [
        //   { required: true, message: "综测状态(-1未审核，0已审核，1,2,3上级审核)不能为空", trigger: "change" }
        // ],
      },
      uploadingAction: 'F:\\Project\\JavaProject\\RuoYi-Vue\\ruoyi-ui\\src',
      uploadingfileList: [],
      userId:'',
      userNumber:'',
      userName :'',
      isGrade :false,
      userGrade:[],
      stepAction:0,
      gradeStatus:'',
    }
  },
  computed: {

  },
  watch: {},
  created() {
    this.userName = this.$store.state.user.userName;
    this.userNumber = this.$store.state.user.userNumber;
    this.userId = this.$store.state.user.userId;
    getIsGrade(this.userId).then(response=> {
      this.userGrade = response.data;
      console.log("in create userGrade")
      console.log(this.userGrade);
      this.getGradeStatus();
      if (this.userGrade!=null){
        // console.log('==> 我执行了吗？？？？？？？？ ');
        this.isGrade = true;
        getGrade(this.userGrade.gradeId).then(response=>{
          this.form = response.data;
          //0已填写 显示step1
        });
      }
      // if (this.isGrade===true){
      //   this.gradeId =this.userGrade.gradeId;
      //   // console.log("==> grade_id: "+this.gradeId);
      // }

      // console.log('==> isGrade: ');
      // console.log(this.isGrade);
    });
  },
  mounted() {
    // console.log('this.gradeStatus');
    // console.log(this.gradeStatus);
    // console.log('this.userGrade');
    // console.log(this.userGrade);
    // console.log('this.stepAction');
    // console.log(this.stepAction);
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid){
          if (this.form.gradeId != null) {
            updateGrade(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
             // this.getList();
            });
          } else {
            addGrade(this.form).then(response => {
              // console.log("=====我执行了！！！")
              // console.log(response.data);
              this.addUserGrade(response.data.gradeId);
              // console.log(response.data.gradeId);
              this.$modal.msgSuccess("新增成功");
              this.open = false;
             // this.getList();
            });
          }
        }
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // uploadingBeforeUpload(file) {
    //   let isRightSize = file.size / 1024 / 1024 < 2
    //   if (!isRightSize) {
    //     this.$message.error('文件大小超过 2MB')
    //   }
    //   let isAccept = new RegExp('.doc,.docx').test(file.type)
    //   if (!isAccept) {
    //     this.$message.error('应该选择.doc,.docx类型的文件')
    //   }
    //   return isRightSize && isAccept
    // },
    addUserGrade(gradeId){
      // this.userGrade.push(this.userId);
      this.userGrade={'userId':this.userId,'gradeId':gradeId}
      // this.userGrade.push(gradeId);
      addUserGrade(this.userGrade);
    },
    getGradeStatus(){
      this.gradeStatus = this.userGrade.gradeStatus;
      if (this.gradeStatus === 0){
        this.stepAction = 1;
      }
      //5已完成 显示step3
      if (this.gradeStatus === 5){
        this.stepAction = 2;
      }
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
